<template>
  <div class="left-nav">
    <div class="left-user-info">
      <div class="left-user-image">
        <img src="../assets/images/咚咚咚.jpg" alt="user-img" />
      </div>
      <div class="left-user-name">图灵智能</div>
      <span class="left-user-class">万维图灵</span>
    </div>
    <LeftNavMenu>
      <FirstItem
        v-for="item in FirstItemList"
        :FirstItemInfo="item"
        :key="item.id"
      ></FirstItem>
      <SecondMenu
        v-for="SecondMenuInfo in SecondMenuList"
        :SecondMenuInfo="SecondMenuInfo"
        :key="SecondMenuInfo.id"
      ></SecondMenu>
    </LeftNavMenu>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import LeftNavMenu from "./LeftNavMenu.vue";
import FirstItem from "./FirstItem.vue";
import SecondMenu from "./SecondMenu.vue";
import { FirstItemInfo } from "./FirstItem.vue";
import { SecondMenuInfo } from "./SecondMenu.vue";
@Component({
  name: "LeftNav",
  components: {
    LeftNavMenu,
    FirstItem,
    SecondMenu,
  },
})
export default class extends Vue {
  // 一级选项的数据数组
  FirstItemList: Array<FirstItemInfo> = [
    {
      id: 0,
      iClass: "fas fa-user",
      title: "学生主页",
    },
    {
      id: 1,
      iClass: "fas fa-newspaper",
      title: "我的课程",
    },
    {
      id: 2,
      iClass: "el-icon-document",
      title: "考试系统",
    },
    {
      id: 3,
      iClass: "fas fa-calendar-check",
      title: "AI开发中心",
    },
  ];
  // 二级选项的数据数组
  SecondMenuList: Array<SecondMenuInfo> = [
    {
      id: 4,
      iClass: "fas fa-user",
      title: "考试管理",
      children: [
        {
          fatherId:4,
          key: "4-1",
          iClass: "fas fa-user",
          title: "习题库",
        },
        {
          fatherId:4,
          key: "4-2",
          iClass: "fas fa-user",
          title: "试卷库",
        },
        {
          fatherId:4,
          key: "4-3",
          iClass: "fas fa-user",
          title: "知识点标签",
        },
      ],
    },
  ];
}
</script>

<style>
.left-nav {
  display: inline-block;
  
  border-radius: 6.4px;
  width: 176px;
  margin-left: 56px;
  min-height: 775px;
  background-color: white;
  overflow: hidden;
}
.left-user-info {
  text-align: center;
  width: 100%;
  padding: 30px 0;
  background-color: white;
  z-index: 4;
}
.left-user-image {
  margin: 0 auto 15px;
  width: 78.4px;
  height: 78.4px;
  border-radius: 50%;
}
.left-user-image > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.left-user-name {
  margin-bottom: 4px;
}
.left-user-class {
  margin-top: 5px;
  font-size: 12px;
  color: #aaa;
}
</style>

